<template>
	<view class="ordersinfo">
		<!-- 地址 -->
		<view class="ordersinfo-address">
			<view class="ordersinfo-address-l">
				<view class="ordersinfo-address-a">吉林省吉林市昌邑区通江街道</view>
				<view class="ordersinfo-address-b">通潭大路通潭富苑1号楼百航科技</view>
				<view class="ordersinfo-address-c">{{ordermore.truename}} {{ordermore.tel}}</view>
			</view>
		</view>
		<view class="ordersinfo-shops">
			<view class="ordersinfo-shops-top">
				<view class="ordersinfo-shops-top-l">商品信息</view>
				<view class="ordersinfo-shops-top-r" v-if="ordermore.ok==1">待付款</view>
				<view class="ordersinfo-shops-top-r ordersinfo-shops-top-r__org" v-if="ordermore.ok==2">已付款</view>
				<view class="ordersinfo-shops-top-r ordersinfo-shops-top-r__ok" v-if="ordermore.ok==3">已完成</view>
			</view>
			<view class="ordersinfo-shops-box">
				<!-- 循环体 -->
				<navigator :url="'../proinfo/proinfo?id='+sitem.id" class="ordersinfo-shops-item" hover-class="custom-hover-sm"
					v-for="(sitem,sindex) in ordermore.OrderList" :key="sindex">
					<view class="ordersinfo-shops-item-img">
						<view class="jximgbox">
							<view class="jxstips">{{sitem.Class}}</view>
							<image class="jximg" :src="sitem.PicFiles" mode="aspectFit"></image>
						</view>
					</view>
					<view class="ordersinfo-shops-item-right">
						<view class="ordersinfo-shops-item-title">{{sitem.Titles}}</view>
						<view class="ordersinfo-shops-item-bot">
							<view class="price"><text>￥{{sitem.Price}}</text></view>
							<view class="ordersinfo-shops-item-bot-num"><text>x {{sitem.count}}</text></view>
						</view>
					</view>
				</navigator>
				<!-- 循环体 -->
			</view>
			<view class="ordersinfo-shops-os">
				<view class="ordersinfo-shops-os-se">
					<view class="ordersinfo-shops-os-se-l">商品总价</view>
					<view class="ordersinfo-shops-os-se-r">￥{{ordermore.paymoney}}</view>
				</view>
				<view class="ordersinfo-shops-os-se">
					<view class="ordersinfo-shops-os-se-l">订单运费</view>
					<view class="ordersinfo-shops-os-se-r">￥6</view>
				</view>
				<view style="text-align: right;">
					共{{ordermore.nums}}件商品 实付款 <text
						style="font-weight: bold;font-size: 30rpx;color: red;">￥{{ordermore.paymoney}}</text>
				</view>
			</view>
		</view>
		<view class="ordersinfo-msg">
			<view class="ordersinfo-msg-tit">订单信息</view>
			<view class="ordersinfo-msg-se">订单编号: 202204030589764</view>
			<view class="ordersinfo-msg-se">下单时间:
				<uni-dateformat date="2022-04-02 16:26:48" :threshold="[0,0]"></uni-dateformat>
			</view>
		</view>
		<view class="ordersinfo-foot">
			<button class="ordersinfo-foot-btn">取消订单</button>
			<button class="ordersinfo-foot-btn danger">付款</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";
	const ordermore = ref({
		truename: "小马哥",
		address: "吉林省吉林市",
		tel: '139****1123',
		ok: 3,
		paymoney: 2133,
		OrderList: [{
			id: 1,
			Class: "中药配方颗粒",
			Titles: '酒白芍配方颗粒酒白芍配方颗粒',
			PicFiles: "http://baihang.com.cn/Upload/image/2021090904LMFFG9.jpg",
			Price: 12.12,
			spcc: "每袋装0.83g",
			count: 3
		}, {
			id: 1,
			Class: "中药配方颗粒",
			Titles: '酒白芍配方颗粒酒白芍配方颗粒',
			PicFiles: "http://baihang.com.cn/Upload/image/2021090904LMFFG9.jpg",
			Price: 12.12,
			spcc: "每袋装0.83g",
			count: 3
		}]
	})
</script>

<style lang="scss">
	page {
		background: #eee;
	}

	.ordersinfo {
		padding: 20rpx;
		padding-bottom: 140rpx;

		&-address {
			padding: 20rpx;
			box-sizing: border-box;

			background: {
				color: $cf;
				image: url("");
				repeat: repeat-x;
				size: auto 8rpx;
				position: bottom left;
			}

			text-align: left;
			line-height: normal;
			border-radius: 10rpx;
			margin: 0;
			margin-bottom: 20rpx;
			width: 100%;

			&::after {
				display: none;
			}

			&-default {
				font-size: 34rpx;
				color: $c3;
				padding: 10rpx 0;
			}

			&-a {
				font-size: 30rpx;
				color: $c3;
			}

			&-b {
				font-size: 36rpx;
				color: $c3;
				padding: 10rpx 0;
			}

			&-c {
				font-size: 26rpx;
				color: $c6;
			}

		}

		&-shops {
			padding: 20rpx;
			border-radius: 10rpx;
			background: $cf;
			margin-bottom: 20rpx;

			&-top {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 20rpx;

				&-l {
					font-size: 30rpx;
					color: $c0;
				}

				&-r {
					font-size: 24rpx;
					color: $red;

					&__org {
						color: #ffaa00;
					}

					&__ok {
						color: $c9;
					}
				}
			}

			&-box {
				padding-bottom: 20rpx;
				margin-bottom: 20rpx;
				border-bottom: 1px solid #eee;
			}

			&-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				background: $cf;
				border-radius: 15rpx;
				margin-bottom: 20rpx;

				&:last-child {
					margin-bottom: 0;
				}

				&-img {
					flex-shrink: 0;
					width: 180rpx;

					.jximgbox {
						background: #f4f4f4;
						border-radius: 10rpx;
						overflow: hidden;
					}
				}

				&-right {
					flex: 1;
					padding: 0 25rpx;
					overflow: hidden;
				}

				&-title {
					text-align: justify;
					font-size: 30rpx;
					line-height: 45rpx;
					max-height: 90rpx;
					display: -webkit-box;
					overflow: hidden;
					text-overflow: ellipsis;
					-webkit-box-orient: vertical;
					line-clamp: 2;
					-webkit-line-clamp: 2; //显示几行
					overflow: hidden;
					color: $c0;
				}

				&-bot {
					margin-top: 20rpx;
					display: flex;
					flex-direction: column;

					.price {
						font-size: 30rpx;
						color: $c0;

						text {
							border-bottom: 1px solid $c0;
						}
					}

					&-num {
						text {
							font-size: 24rpx;
							color: $c9;
							border-bottom: 1px solid $c9;
						}
					}
				}
			}

			&-os {
				&-se {
					padding-left: 190rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 10rpx;

					&-l {
						font-size: 30rpx;
						color: #888;
					}

					&-r {
						font-size: 30rpx;
						color: $c6;
						font-weight: bold;
					}
				}

				&-fs {
					display: inline-flex;
					align-items: center;
					padding-top: 10rpx;
				}
			}
		}

		&-msg {
			padding: 20rpx;
			border-radius: 10rpx;
			background: $cf;
			margin-bottom: 20rpx;

			&-tit {
				font-size: 30rpx;
				color: $c0;
			}

			&-se {
				font-weight: bold;
				font-size: 26rpx;
				color: $c9;
				margin-top: 20rpx;
			}
		}



		&-foot {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			background: $cf;
			z-index: 11;
			padding: 20rpx;
			box-sizing: border-box;
			text-align: center;

			&-btn {
				font-size: 30rpx;
				border: 1px solid $c9;
				border-radius: 1000px;
				color: $c9;
				padding: 0 15rpx;
				margin: 0 10rpx;
				line-height: 1.7;
				display: inline-block;
				background: none;

				&::after {
					display: none;
				}

				&.danger {
					background: $red;
					color: $cf;
					border: none;
				}
			}
		}
	}
</style>